<template>
  <div class="">
    <Header></Header>
    <div class="main items column">
      <div class="product">
        <div class="product_order_top">
          <div class="product_order_top_div">
            <div class="delivery_radio_title">
              Способ доставки
            </div>
            <div class="delivery_radio_style">
              <div class="items">
                <div class="between mRight100" @click="typeClick(index)" v-for="(item, index) in state.typeList">
                  <div class="items">
                    <img :src="item.flag ? '/src/assets/icons/checkout.png' : '/src/assets/icons/checkout_default.png'"
                         alt="" class="checkout_img">
                    <div class="mLeft20 checkout_title">{{ item.name }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="delivery_radio_1">
              <div class="selectBox" v-if="false">
                <div class="selectBoxTop" @click="state.selectShow = !state.selectShow">
                  <div class="titleBox">Пожалуйста, выберите способ доставки.</div>
                  <div class="iconX">
                    <el-icon color="#ffffff"><ArrowDown /></el-icon>
                  </div>
                </div>
                <div class="showBox" v-show="state.selectShow">
                  <div style="height: 48px"></div>
                  <div class="showBoxText" v-for="index of 4">Пожалуйста, выберите способ доставки.</div>
                </div>
              </div>
              <div class="addressBox">
                <div class="addressItem" v-for="index of 4">
                  <div class="userData">
                    <div class="name">Толстой</div>
                    <div class="shouji">187****3232</div>
                  </div>
                  <div class="addressText">
                    Адрес: Госпиталь уезда Сюнсян, уезд Сюнчжоу, город Баодин, провинция Хэбэй
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="product_order_bottom">
          <Shopping_list style="border-bottom: 1px solid #EEEEEE;"></Shopping_list>
          <div class="message">
            <div class="message_title">Оставьте сообщение продавцу</div>
            <div class="items">
              <div class="message_input">
                <el-input v-model="state.input" placeholder="Please input" />
              </div>
              <div class="message_price_title content_end">
                <div class="message_price_title_name">Общая сумма товаров</div>
                <div class="message_price_title_price"> 796.00₽</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="service">
        <div class="items title">
          <img class="title_img" src="/src/assets/icons/service.png" alt="">
          <div class="title_style">Услуги с добавленной стоимостью</div>
        </div>
        <div class="mTop20 ">
          <div class="between mBtm26" v-for="item in serviceList">
            <div class="items">
              <img :src="item.flag ? '/src/assets/icons/checkout.png' : '/src/assets/icons/checkout_default.png'" alt=""
                class="checkout_img">
              <div class="mLeft20 checkout_title items">
                <div class="c66">{{ item.name }}</div>
                <div class="cFF8 mLeft10" v-if="item.isFree">(Два дня бесплатно)</div>
              </div>
            </div>
            <div class="checkout_price">₽{{ item.price }}</div>
          </div>
        </div>
      </div>
      <div class="invoice">
        <div class="items title">
          <img src="/src/assets/icons/invoice.png" alt="" class="title_img">
          <div class="title_style">Способ доставки</div>
        </div>
        <div class="mTop20 ">
          <div class="items">
            <div class="between mRight100" @click="invoiceClick(index)" v-for="(item, index) in invoiceList">
              <div class="items">
                <img :src="item.flag ? '/src/assets/icons/checkout.png' : '/src/assets/icons/checkout_default.png'"
                  alt="" class="checkout_img">
                <div class="mLeft20 checkout_title">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="invoice_message mTop20 between" v-if="indexOf == 1">
            <div>
              <div class="invoice_message_1">Московская компания</div>
              <div class="invoice_message_2 mTop10">Номер налога: 91440104X98W7D</div>
            </div>
            <div class="items" @click="dialogVisible = true">
              <div class="invoice_message_2">Изменения</div>
              <img src="/src/assets/icons/arrow_right_1.png" style="width: 24px;height: 24px;" alt="">
            </div>
          </div>
          <el-dialog v-model="dialogVisible" title="" width="400">
            <div class="pBtm20">
              <div class="invoice_update_title c33">Название компании</div>
              <el-input v-model="invoiceName" class="mTop20" style="width: 360px;height: 40px;"
                placeholder="Please input" />
              <div class="mTop20 invoice_update_title c33">Название компании</div>
              <el-input v-model="invoiceName" class="mTop20" style="width: 360px;height: 40px;"
                placeholder="Please input" />
              <div class="mTop40 invoice_update center cFF">Определение изменений</div>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="expense">
        <div class="items title">
          <img src="/src/assets/icons/expense.png" alt="" class="title_img">
          <div class="title_style">Разбивка расходов</div>
        </div>
        <div class="mTop20">
          <div class="between mBtm26" v-for="item in expenseList">
            <div class="items">
              <!-- <img :src="item.flag ? '/src/assets/icons/checkout.png' : '/src/assets/icons/checkout_default.png'" alt="" -->
              <!-- class="checkout_img"> -->
              <div class="mLeft20 checkout_title items">
                <div class="c66">{{ item.name }}</div>
              </div>
            </div>
            <div class="checkout_price">₽{{ item.price }}</div>
          </div>
        </div>
      </div>
      <div class="allMoney between">
        <div class="between column">
          <img src="/src/assets/icons/shopping_cart.png" alt="" class="allMoney_img" style="">
          <div>Тележка</div>
        </div>
        <div class="items">
          <div class="end">
            <div class="allMoney_title_1 c33">Сумма платежа</div>
            <div class="allMoney_title_2 mLeft4 cFF8">796.00₽</div>
          </div>
          <div class="mLeft50 allMoney_btn center cFF" style="">Немедленная оплата</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="cart" setup>
import { ref, reactive } from "vue";
import Header from '@/components/Header/Header.vue';//引入的头部的组件
import Shopping_list from '@/components/Shopping_list/Shopping_list.vue';
import {ArrowDown} from "@element-plus/icons-vue";
//引入的商品列表的组件
const state = reactive({
  typeIndex:1,
  selectShow:false,
  input:'',
  typeList:[
    {name:'Снятие со склада',flag:true},
    {name:'Доставка на дом',flag:false},
  ]
})
const typeClick = (index:number) => {
  state.typeIndex = index;
  state.typeList.forEach(item => { item.flag = false });
  state.typeList[index].flag = true;
}
</script>

<style lang="less" scoped>
.main {
  background: #F6F6F6;

  .product {
    width: 1400px;
    min-height: 643px;
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 16px;
    // padding: 40px;

    .product_order_top {
      width: 1400px;
      //height: 200px;
      border-radius: 16px 16px 0px 0px;
      background: url('/src/assets/icons/order_top_bg.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      .delivery_radio_title {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #333333;
      }

      .product_order_top_div {
        width: 1320px;
        //height: 134px;
        padding: 40px 40px 0 40px;

        .delivery_radio_style {
          margin: 19px 0 9px 0;
        }

        .delivery_radio_1 {
          margin-top: 22px;
          .selectBox{
            position: relative;
            .selectBoxTop{
              position: absolute;
              width: 1320px;
              height: 48px;
              background: #0070E9;
              border-radius: 8px 8px 8px 8px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              box-sizing: border-box;
              padding: 16px 20px;
              z-index: 15;
              cursor: pointer;
              .titleBox{
                font-family: Segoe UI, Segoe UI;
                font-weight: 600;
                font-size: 16px;
                color: #FFFFFF;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
              }
            }
            .showBox{
              position: absolute;
              width: 1320px;
              height: 248px;
              background: #F6F6F6;
              border-radius: 8px 8px 8px 8px;
              border: 1px solid #0070E9;
              z-index: 10;
              //top: -10px;
              overflow: auto;
              padding: 0 20px;
              box-sizing: border-box;
              .showBoxText{
                padding: 10px 0;
              }
            }
          }
          .addressBox{
            display: flex;
            justify-content: space-between;
            .addressItem_action{
              background-color: #0070E9 ;
            }
            .addressItem{
              width: 315px;
              height: 114px;
              background: #F6F6F6;
              border-radius: 8px 8px 8px 8px;
              border: 1px solid #999999;
              box-sizing: border-box;
              padding: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              .userData{
                display: flex;
                font-family: Segoe UI, Segoe UI;
                font-weight: bold;
                font-size: 16px;
                color: #333333;
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-bottom: 10px;
                .name{
                  margin-right: 10px;
                }
              }
              .addressText{
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 12px;
                color: #999999;
                line-height: 14px;
                text-align: justified;
                font-style: normal;
                text-transform: none;
              }
            }
          }
        }
      }
    }

    .product_order_bottom {
      padding: 0 40px;

      .message {
        margin-bottom: 20px;
        .message_title {
          font-family: PingFang SC;
          font-size: 16px;
          font-weight: 600;
          line-height: 16px;
          text-underline-position: from-font;
          text-decoration-skip-ink: none;
          color: #333333;
          margin: 20px 0;
        }

        .message_input {
          :deep(.el-input){
            width: 900px;
            height: 60px;
            border-radius: 8px !important;
            overflow: hidden;
            background: #F6F6F6 !important;
          }
          :deep(.el-input__wrapper){
            border-radius: 8px !important;
            background: #F6F6F6 !important;
          }
        }

        .message_price_title {
          margin-left: 113px;
          margin-bottom: ;
          .message_price_title_name {
            font-family: PingFang SC;
            font-size: 12px;
            font-weight: 400;
            line-height: 12px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #333333;
          }

          .message_price_title_price {
            font-family: PingFang SC;
            font-size: 20px;
            font-weight: 400;
            line-height: 20px;
            text-align: left;
            text-underline-position: from-font;
            text-decoration-skip-ink: none;
            color: #FF831F;
            margin-left: 4px;
          }
        }
      }
    }

  }

  .title {
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 24px;

    .title_style {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 16px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
      color: #333333;
      margin-left: 6px;
    }

    .title_img {
      width: 20px;
      height: 20px;
    }
  }

  .service {
    width: 1320px;
    height: 215px;
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 16px;
    padding: 40px;
  }

  .invoice {
    width: 1320px;
    height: auto;
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 16px;
    padding: 40px;

    .invoice_update {
      width: 360px;
      height: 48px;
      border-radius: 8px;
      background: #0070E9;
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 16px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }

    .invoice_update_title {
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 400;
      line-height: 16px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }

    .invoice_message {
      width: 1280px;
      height: 38px;
      padding: 12px 20px;
      border-radius: 8px;
      background: #F6F6F6;

      .invoice_message_1 {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #333333;
      }

      .invoice_message_2 {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: #999999;
      }
    }
  }

  .expense {
    width: 1320px;
    height: 215px;
    border-radius: 16px;
    background: #FFFFFF;
    margin-top: 16px;
    padding: 40px;
  }

  .allMoney {
    width: 1320px;
    height: 60px;
    border-radius: 16px;
    background: #FFFFFF;
    padding: 20px 40px;
    margin-top: 16px;
    margin-bottom: 355px;

    .allMoney_img {
      width: 32px;
      height: 32px;
    }

    .allMoney_title_1 {
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }

    .allMoney_title_2 {
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }

    .allMoney_btn {
      width: 300px;
      height: 60px;
      border-radius: 8px;
      background: #0070E9;
      font-family: PingFang SC;
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
  }

  .checkout_title {
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 14px;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
  }

  .checkout_price {
    font-family: PingFang SC;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    text-align: right;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    color: #FF831F;
  }

}
</style>
